<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="takePhoto">加入可视化界面</button>


<!--    //这个需要放在前端代码的最后面-->
    <div>
        <video ref="video" autoplay></video>
        <button @click="takePhoto">拍照</button>
        <canvas ref="canvas" style="display: none;"></canvas>
        <!--<img v-if="photo" :src="photo" alt="拍摄的照片">-->
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            photo: null
        },
        methods: {
            async takePhoto() {
                const video = this.$refs.video;
                const canvas = this.$refs.canvas;

                try {
                    // 获取摄像头视频流
                    const stream = await navigator.mediaDevices.getUserMedia({video: true});
                    video.srcObject = stream;

                    // 等待摄像头初始化完成
                    await new Promise((resolve) => {
                        video.onloadedmetadata = () => {
                            video.play();
                            // 将视频帧绘制到 canvas 中
                            canvas.width = video.videoWidth;
                            canvas.height = video.videoHeight;
                            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

                            // 将 canvas 转换为图片
                            this.photo = canvas.toDataURL('image/jpeg');

                            // 将图片数据发送给后端
                            this.uploadPhoto(this.photo);

                            // 停止摄像头视频流
                            stream.getTracks().forEach(track => track.stop());

                            resolve();
                        };
                    });
                } catch (error) {
                    console.error('摄像头访问出错:', error);
                }
            },
            async uploadPhoto(photoData) {
                try {
                    const response = await fetch('http://localhost:8080/AboutMarketing/checkFace', {
                        method: 'POST',
                        body: JSON.stringify({ photo: photoData }), // 直接发送 Base64 数据
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    });

                    if (response.ok) {
                        const responseData = await response.json();
                        // 处理后端返回的数据
                        if (responseData === true) {
                            window.location.href = 'http://localhost:8080/index.html';
                        } else {
                            alert('人脸识别失败');
                        }
                    } else {
                        console.error('后端响应错误:', response.statusText);
                    }
                } catch (error) {
                    console.error('发送请求出错：', error);
                }
            },
        }
    });
</script>
</body>
</html>
